import React, {useState} from 'react';
import {NotificationOutlined} from '@ant-design/icons';
import {Button, Input} from "antd";
import Charts from './charts';

const NLP = () => {

  const data1 = {
    nodes: [
      {
        id: '0',
        label: '单券报告',
      },
      {
        id: '1',
        label: '国债收益率展示',
      },
      {
        id: '2',
        label: '利率综合屏',
      }
    ],
    edges: [
      {
        source: '0',
        target: '1',
      },
      {
        source: '1',
        target: '2',
      }
    ],
  };
  const data2 = {
    nodes: [
      {
        id: '0',
        label: '风险扫描',
      },
      {
        id: '1',
        label: '发行人报告',
      }
    ],
    edges: [
      {
        source: '0',
        target: '1',
      }
    ],
  }
  const [text, setText] = useState('');

  const buttonClick = () => {
    if (text === '国债') {
      setText('发行人报告')
    } else {
      setText('国债');
    }
  }

  return (
    <div style={{marginTop: 40}}>
      <div style={{display: 'flex'}}>
        <Button shape="circle" icon={<NotificationOutlined style={{fontSize: 25}}/>} style={{height: 60, width: 60}} onClick={buttonClick}/>
        <Input style={{width: 600, marginLeft: 15, fontSize: 25}} value={text} onChange={e => setText(e.target.value)}/>
      </div>
      <div>
        {text === '国债' && <Charts data={data1}/>}
        {text === '发行人报告' && <Charts data={data2}/>}
      </div>
    </div>
  )
}

export default NLP;